<template>
  <div class="emailDetail">
    <header>
      <span><i class="iconfont icon-fanhui" @click="$router.go(-1)"></i> 规则分析 【{{info.name}}】</span>
    </header>
    <ul class="preview" style="justify-content: flex-start">
      <li style="margin-right: 40px">
        <h1>{{info.platformsCount}}</h1>
        <p>发送平台</p>
      </li>
      <li>
        <h1>{{info.countVo.likesCount}}</h1>
        <p>点赞数</p>
      </li>
<!--      <li>-->
<!--        <h1>{{info.countVo.commentsCount}}</h1>-->
<!--        <p>评论数</p>-->
<!--      </li>-->
    </ul>
    <el-table :data="tableData">
      <el-table-column label="规则名称">
        <template slot-scope="scope">
          <div class="more" :title="scope.row.name">
            {{scope.row.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userGroupId" label="发送平台/时间">
        <template slot-scope="scope">
          <img v-show="scope.row.facebookEnable"  :title="`Facebook发布时间:${scope.row.facebookPublishTime}`" src="../../../../public/img/icon/facebook.png" alt="">
          <img v-show="scope.row.twitterEnable"  :title="`Twitter发布时间:${scope.row.twitterPublishTime}`" src="../../../../public/img/icon/Twitter.png" alt="">
          <img v-show="scope.row.linkedinEnable"  :title="`Linkedin发布时间:${scope.row.linkedinPublishTime}`" src="../../../../public/img/icon/linkedin.png" alt="">
        </template>
      </el-table-column>
      <el-table-column label="点赞数">
        <template slot-scope="scope">
          {{scope.row.countVo.likesCount}}
        </template>
      </el-table-column>
<!--      <el-table-column label="评论数">-->
<!--        <template slot-scope="scope">-->
<!--          {{scope.row.countVo.commentsCount}}-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <!--灰色间隔线-->
<!--    <div class="gray"></div>-->
<!--    <div class="bottom-content">-->
<!--      <h1 class="title">规则分析</h1>-->
<!--      <div class="tableList">-->
<!--        <el-tabs v-model="activeName">-->
<!--          <el-tab-pane :label='`点赞数(${likeCount})`' name="first">-->
<!--            <TableListSocialLike @getlikeCount="getlikeCount"-->
<!--                                 :account="account" :id="$route.params.id"></TableListSocialLike>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane :label='`评论数(${commentCount})`' name="second">-->
<!--            <TableListSocialComment @getcommentCount="getcommentCount"-->
<!--                                    :account="account" :id="$route.params.id"></TableListSocialComment>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
    import TableListSocialLike from '@/components/automation/marketStatic/TableListSocialLike'
    import TableListSocialComment from '@/components/automation/marketStatic/TableListSocialComment'
    import TableListRollBack from '@/components/automation/marketStatic/TableListRollBack'
    import {getSocialStaticDetail} from '@/api/marketStatic/social'
    import {getSocialAccount} from "@/api/mail/admin/mail-set";

    export default {
        name: "emailDetail",
        components: {TableListSocialLike, TableListRollBack, TableListSocialComment},
        data() {
            return {
                tableData: [],
                searchContent: '',
                activeName: 'first',
                info: {platformsCount: 0, countVo: {likesCount: 0, commentsCount: 0}},
                account: [],
                likeCount:0,
                commentCount:0
            }
        },
        created() {
            this.getAccounts();//获取社交账户
            this.getData();//获取详情数据
        },
        methods: {
            getData() {
                getSocialStaticDetail(this.$route.params.id).then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                        this.tableData.push(this.info)
                    }
                })
            },
            getAccounts() {
                getSocialAccount().then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.account = this.account.concat(result.facebookAccounts, result.linkedinAccounts, result.twitterAccounts);
                    }
                })
            },
            getlikeCount(num){
                this.likeCount = num
            },
            getcommentCount(num){
                this.commentCount = num
            }
        }
    }
</script>

<style scoped lang="scss">
  .emailDetail {
    height: 100%;
    img{
      width: 27px;
      height: 27px;
      margin-right: 10px;
      cursor: pointer;
    }
    header {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      color: #000;
      font-size: 16px;

      i {
        font-size: 18px;
        color: #0a6cd6;
        margin-right: 5px;
        cursor: pointer;
      }

      .el-input.el-input--small.el-input--prefix {
        width: 250px;
      }
    }

    .preview {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px !important;

      li {
        background-size: 100% 100%;
        width: 280px;
        background: url('../../../../public/img/bg1.png') no-repeat;
        background-size: 100% 100%;
        padding: 25px 3%;
        color: #325893;

        h1 {
          font-size: 28px;
          margin-bottom: 30px;
        }

        p {
          font-size: 16px;
        }
      }
    }

    li:nth-child(2) {
      background: url('../../../../public/img/bg2.png') no-repeat;
      background-size: 100% 100%;
    }

    li:nth-child(3) {
      background: url('../../../../public/img/bg3.png') no-repeat;
      background-size: 100% 100%;
    }

    .gray {
      height: 25px;
      margin-left: -10px;
      margin-right: -52px;
      margin-top: 5px;
      background-color: #F5F5F5;
    }

    .bottom-content {
      .title {
        color: #000;
        font-size: 16px;
        padding: 15px 0;
      }
    }
  }

  @media screen and (min-width: 1800px) {
    .emailDetail .preview li {
      width: 300px;
    }
  }
</style>
